<template>
    <el-table class="icode_table" :data="list_data" style="width: 100%" :table-layout="'auto'">
        <el-table-column prop="icode" label="icode"/>
    </el-table>
    <div class="code_add_button_box">
        <el-button class="code_add_button" @click="this.add_icode" type="primary">生成邀请码</el-button>
    </div>
</template>

<script>
    import {ElLoading, ElMessage} from "element-plus";
    import axios from "axios";

    export default {
        name: "CodeList",
        data() {
            return {
                list_data: [],
            }
        },
        methods: {
            add_icode(){
                let this_ = this;
                const loading = ElLoading.service({
                    lock: true,
                    text: 'Loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                })

                setTimeout(() => {
                    loading.close()
                }, 5000)

                let post_url = '/root/api/gen_code'

                axios.post(post_url)
                    .then(function (response) {

                        setTimeout(() => {
                            loading.close()
                        }, 500)

                        let user_data = response.data

                        if (user_data === '0'){
                            ElMessage({message: "权限不足", type: 'error'})
                            return
                        }
                        else if (user_data === '-1'){
                            ElMessage({message: "生成失败", type: 'error'})
                            return
                        }
                        else if (user_data === '1'){
                            ElMessage({message: "生成成功", type: 'success'})
                            this_.update_data(this_)
                            return
                        }
                        ElMessage({message: "Unknown Error", type: 'error'})
                    })
                    .catch(function (error) {
                        console.log(error);
                        ElMessage({message: "服务器异常，获取用户信息失败", type: 'error'})
                        setTimeout(() => {
                            loading.close()
                        }, 500)
                    });
            },
            update_data(this_){
                const loading = ElLoading.service({
                    lock: true,
                    text: 'Loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                })

                setTimeout(() => {
                    loading.close()
                }, 5000)

                // let this_ = _this;
                axios.post('/root/api/code')
                    .then(function (response) {

                        setTimeout(() => {
                            loading.close()
                        }, 500)

                        let user_data = response.data

                        if (user_data === '0'){
                            ElMessage({message: "权限不足", type: 'error'})
                            return
                        }
                        let user_data_ = []

                        for (let i = 0; i < user_data.length; i++) {
                            user_data_.unshift({"icode": user_data[i]})
                        }

                        this_.list_data = user_data_
                    })
                    .catch(function (error) {
                        console.log(error);
                        ElMessage({message: "服务器异常，获取用户信息失败", type: 'error'})
                        setTimeout(() => {
                            loading.close()
                        }, 500)
                    });
            }
        },
        mounted() {
            let _this = this;
            window.onload = function () {
                _this.update_data(_this)
            }
        },
    }
</script>

<style scoped>

    .icode_table{

    }

    .code_add_button_box{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .code_add_button{
        margin: 16px 0;
        padding: 4px 24px;
    }

</style>